<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽二（鼠标位置）</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            left: 100px;
            top: 100px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>
<script>
    /*
        拖拽 box1 元素
            - 拖拽流程
                1.当鼠标在被拖拽元素上按下时，开始推拽 onmousedown
                2.当鼠标移动时 被拖拽元素跟随鼠标移动  onmousemove
                3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
    */

    // 获取 box1
    var box1 = document.getElementById("box1");
    // 为 box1 绑定鼠标按下事件
    // 当鼠标在拖拽元素上按下时， 开始拖拽(onmousedown) 1️⃣
    box1.onmousedown = function(event){

        // div 的偏移量  鼠标.clentX - 元素.offsetLeft
        var ol = event.offsetX;
        var ot = event.offsetY;

        // 为 document 绑定 onmousemove 事件2️⃣
        document.onmousemove=function(event){

            // 获取鼠标坐标 ⭐
            var Left = event.clientX - ol;
            var Top  = event.clientY - ot;

            // 修改 box1 的位置 ⭐
            box1.style.left = Left + "px";
            box1.style.top = Top + "px";
            
            
        };

        // 为document 绑定一个 鼠标松开 事件3️⃣
        document.onmouseup = function(){

            // 当鼠标松开时， 被拖拽元素固定在当前位置 onmouseup 4️⃣

            // 取消 document 的 onmousemove 事件 使其不再跟随鼠标移动 ⭐
            document.onmousemove = null;

            // 取消document 的 onmouseup 事件 📌5️⃣
            /* 
                onmouseup 绑定给了document 所以点击其他地方时，onmouseup也会被触发，
                    在此处取消 document 的 onmouseup事件 ⭐
            */
            document.onmouseup = null;

        };

        /*
            当我们拖拽一个网页中的内容时，浏览器会默认区搜索引擎中搜索内容，
                此时会导致拖拽功能的一场，这个是浏览器提供的默认行为，
                如果不希望发生这个行为，则可以通过 return false 来取消默认行为

            ⭐ 但是对 IE8不起作用
        */
        return false;
    };
    
    
    
</script>